<template>
  <div>
    <el-row style="padding: 20px;">
      <el-col :span="2" style="margin-top: 10px;">
        订单状态
      </el-col>
      <el-col :span="6">
        <el-select v-model="status" >
          <el-option v-for="item in options" :value=item.value :label=item.label :key="item.value"></el-option>
         
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" size="small" @click="renderOrderList()">搜索</el-button>
        <el-button size="small" style="margin-left: 20px;" @click="status='';renderOrderList()">重置</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border class="table" :height="getHeight()" style="margin: 20px; width: 95%; ">
      <el-table-column type="index" label="序号" width="50" align="center" fixed>
      </el-table-column>


      <el-table-column prop="number" label="订单编号" width="300" align="center">
      </el-table-column>
      <el-table-column prop="status" label="订单状态" width="200" align="center">
        <template slot-scope="{row}">
          <div style="display: flex;justify-content: center;">
            <span style="background-color: rgb(228, 243, 255);color: rgb(100, 180, 255); font-size: 14px; width: 60px; border-radius: 5px;"
            v-if="fmtData(row.status)=='已发货'">
              {{  fmtData(row.status) }}
            </span>
            <span style="background-color: rgb(35, 155, 254);color: rgb(255, 255, 255); font-size: 14px;width: 120px; border-radius: 5px;"
            v-else-if="fmtData(row.status)=='已收货待评价'">
              {{  fmtData(row.status) }}
            </span>
            <span v-else style="background-color: rgb(226, 70, 70);color: white; font-size: 14px; width: 100px; border-radius: 5px;" >
              {{  fmtData(row.status) }}
            </span>
            <span style="background-color: #f0f0f0;color: rgb(192, 192, 192); font-size: 14px; width: 80px; border-radius: 5px; "
            v-if="fmtData(row.status)!=='已收货待评价'">无效订单</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column  prop="created_at" label="添加时间" width="200" align="center">
      </el-table-column>
      <el-table-column prop="consignee_name" label="用户账号" width="100" align="center">
      </el-table-column>
      <el-table-column prop="pay_type" label="订单类型"  width="120" align="center">
        <template slot-scope="{row}">
          <el-tag v-for="item in options2" :key="item.value" :type="item.type" v-show="item.value==row.pay_type">{{ item.label }}</el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="consignee_phone" label="用户手机号" width="150" align="center">
      </el-table-column>
      <el-table-column prop="consignee_address" label="收货地址"  align="center">
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>
  </div>
</template>
  
<script>
import { getOrderList, getOrderDetail } from '@/api/order';


export default {
  name: 'orderList',
  data() {
    return {
      status: '',
     
      tableData: [],
      page: 1,
      limit: 20,
      count: 0,
      options:[
        {value:"1",label:'待支付'},
        {value:'2',label:'已支付待发货'},
        {value:'3',label:'已发货'},
        {value:'4',label:'已收货待评价'},
        {value:'0',label:'全部'},
    ],
      options2:[
        {value:"0",label:'待支付',type:'warning'},
        {value:'1',label:'正常订单',type:'success'},
        {value:'2',label:'正常订单',type:'success'},  
        {value:'3',label:'正常订单',type:'success'},
    ],
    
    
    }
  },

  filters:{
   
  },
 
  created(){
    this.renderOrderList()
  },
  methods: {
    fmtData(val){
    let res=  this.options.filter(item=>{
        return item.value==val
      }) 
      return res[0].label
     
    },

    renderOrderList(){
     
      getOrderList({page:this.page,limit:this.limit,status:this.status}).then(res=>{
      //  console.log(res)
        if(res.code==1){
          this.tableData=res.data.list
          this.count=res.data.count
        }
      })
    },
    handleSizeChange(val) {
      this.limit = val
      this.renderOrderList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.page = val
      this.renderOrderList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 255
    },
  },
}


</script>  
  
<style scoped></style>
  